import React from 'react';
import { DndProvider } from 'react-dnd';
import { HTML5Backend } from 'react-dnd-html5-backend';
import GridItemComponent from './GridItem';
import { GridLayoutProps } from './types';

const GridLayout: React.FC<GridLayoutProps> = ({ items, moveItem }) => {
    return (
        <DndProvider backend={HTML5Backend}>
            <div className="grid-layout">
                {items.map((item, index) => (
                    <GridItemComponent
                        key={item.id}
                        item={item}
                        index={index}
                        moveItem={moveItem}
                    />
                ))}
            </div>
        </DndProvider>
    );
};

export default GridLayout;